import QtQuick 2.0
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.5

import "../basic"

// 登录
Row {

    Item {
        height: 30
        width: 140
        anchors.verticalCenter: parent.verticalCenter

        // VIP
        Row {
            anchors.verticalCenter: parent.verticalCenter
            spacing: 8

            // 圆形用户图标
            Rectangle {
                id: userIconRect
                width: 25
                height: width
                radius: width / 2
                color: "#2d2d37"

                Image {
                    id: userImg
                    anchors.centerIn: parent
                    source: "qrc:/img/Resources/title/user.png"
                    width: parent.width
                    height: parent.height
                    scale: 0.7
                    // 图片高亮
                    layer.enabled: false
                    layer.effect: ColorOverlay {
                        source: userImg
                        color: "white"
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            parent.layer.enabled = true
                        }
                        onExited: {
                            parent.layer.enabled = false
                        }
                        onPressed: {

                        }
                    }
                }
            }

            // 未登录文本
            Text {
                id: loadStateText
                text: qsTr("未登录")
                color: "#75777f"
                font.pixelSize: 14
                font.family: BasicConfig.commFont
                anchors.verticalCenter: parent.verticalCenter
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        loadStateText.color = "white"
                    }
                    onExited: {
                        loadStateText.color = "#75777f"
                    }
                    onClicked: {
                        BasicConfig.openLoginPopup();
                    }
                }
            }

            // 会员标识
            Item {
                anchors.verticalCenter: parent.verticalCenter
                height: userIconRect.height
                width: loadStateText.implicitWidth * 1.2
                Rectangle {
                    id: vipRect
                    width: parent.width
                    height: 10
                    color: "#dadada"
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    radius: height / 2
                    Label {
                        text: qsTr("VIP开通")
                        anchors.left: parent.left
                        anchors.leftMargin: parent.radius * 2 + 5
                        color: "#f8f9f9"
                        font.pixelSize: parent.height / 2 + 2
                        font.family: BasicConfig.commFont
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Rectangle {
                    id: bgBordRect
                    width: vipRect.height + 4
                    height: width
                    radius: width / 2
                    color: "#dadada"
                    anchors.verticalCenter: parent.verticalCenter
                    border.width: 1
                    border.color: "#13131a"
                }
            }
        }
    }

    // 登录下拉
    Image {
        id: loginImg
        anchors.verticalCenter: parent.verticalCenter
        source: "qrc:/img/Resources/title/arrow.png"
        width: 25
        height: width
        rotation: -90
        layer.enabled: false
        layer.effect: ColorOverlay {
            source: loginImg
            color: "white"
        }
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                loginImg.layer.enabled = true
            }
            onExited: {
                loginImg.layer.enabled = false
            }
        }
    }

    // 消息中心
    Image {
        id: messageImg
        anchors.verticalCenter: parent.verticalCenter
        source: "qrc:/img/Resources/title/message.png"
        width: 25
        height: width
        layer.enabled: false
        layer.effect: ColorOverlay {
            source: messageImg
            color: "white"
        }
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                parent.layer.enabled = true
            }
            onExited: {
                parent.layer.enabled = false
            }
        }
    }

    // 设置
    Image {
        id: settingImg
        anchors.verticalCenter: parent.verticalCenter
        source: "qrc:/img/Resources/title/setting.png"
        width: 25
        height: width
        layer.enabled: false
        layer.effect: ColorOverlay {
            source: settingImg
            color: "white"
        }
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                parent.layer.enabled = true
            }
            onExited: {
                parent.layer.enabled = false
            }
            onClicked: {
                mainStackView.push("qrc:/Src/rightPage/stackPages/Settings.qml")
                BasicConfig.behaviorStack.push(()=>{mainStackView.pop()})   // 匿名函数
            }
        }
    }

    // 皮肤
    Image {
        id: skinImg
        anchors.verticalCenter: parent.verticalCenter
        source: "qrc:/img/Resources/title/skin.png"
        width: 25
        height: width
        layer.enabled: false
        layer.effect: ColorOverlay {
            source: skinImg
            color: "white"
        }
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                parent.layer.enabled = true
            }
            onExited: {
                parent.layer.enabled = false
            }
        }
    }

    Rectangle {
        height: 24
        width: 1
        color: "#2d2d37"
        anchors.verticalCenter: parent.verticalCenter
    }
}
